<template>
  <div class="max">
    <div class="shaixuan">
      <span class="el-icon-zoom-in chaxun">筛选查询</span>
      <el-button class="btn-one">查询结果</el-button>
      <el-button class="el-icon-arrow-up btn-two">收起查询</el-button>
    </div>
    <div class="shaixuan1">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="路线说明：">
          <el-input v-model="formInline.user" placeholder="路线说明"></el-input>
        </el-form-item>
        <el-form-item label="负责人：">
          <el-input v-model="formInline.region" placeholder="负责人"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="adddialog = true">添加</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table
      class="table-1"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column label="路线名称" width="180" prop="routeName">
      </el-table-column>
      <el-table-column label="负责人员" width="180" prop="brandName">
      </el-table-column>
      <!-- <el-table-column label="状态" width="180" prop="Used"> </el-table-column> -->
      <el-table-column label="状态" width="180" prop="Used">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isUsed"
            active-color="#13ce66"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加dialog弹窗 -->
    <el-dialog
      title="添加用户"
      :visible.sync="adddialog"
      width="30%"
      :close-on-click-modal="false"
      @close="addclosedialog"
    >
      <el-form
        :model="edituser"
        :rules="addformrules"
        ref="addformref"
        label-width="70px"
      >
        <el-form-item label="名称" prop="addName">
          <el-input v-model="edituser.addName"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="peron">
          <el-input v-model="edituser.peron"></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="edituser.state"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="adddialog = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { delApi, addApi, selectByName } from "@/http/XingweiApi/delApi";
import { huoQueApi } from "@/http/XingweiApi/huoQueApi";

export default {
  data() {
    return {
      tableData: [],
      total: 0,
      page: 1,
      size: 10,
      currentPage4: 1,
      adddialog: false,
      edituser: {
        addName: "",
        peron: "",
        state: "",
      },
      formInline: {
        user: "",
        region: "",
      },
      addformrules: {
        addName: [
          { required: true, message: "请输入路线名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        peron: [
          { required: true, message: "请输入路线名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  // 获取后端数据封装函数
  created() {
    this.init(this.page);
  },
  methods: {
    // 分页获取数据
    init(page) {
      huoQueApi(page)
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data;
          // this.total=res.data.count
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 删除数据
    handleDelete(id) {
      this.$confirm("此操作将永久删除该文件，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delApi(id).then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功",
              });
              this.init(this.page);
            } else {
              this.$message({
                type: "error",
                message: "删除失败",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 添加数据
    add() {
      this.$router.push({ path: "/Xingwei-1/Xingwei-1-2" }); // 添加用户信息
      this.$refs.addformref.validate((valid) => {
        if (!valid) return;
        addApi({ data: this.edituser })
          .then((res) => {
            if (res.data.code == 200) {
              this.$message.success("添加成功");
              this.init();
            }
          })
          .catch((e) => {
            console.log(e);
            this.$message.error("发起请求失败");
          });
      });
    },
    handleEdit(row) {
      console.log(row);
      this.$router.push({
        path: "/Xingwei-1/Xingwei-1-2",
        query: { info: row },
      });
    },
    // 查询数据
    onSubmit() {
      selectByName(this.formInline)
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data;
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.max-hard {
  width: 100%;
  height: 50px;
  background-color: rgba(243, 243, 243);
  line-height: 50px;

  h4 {
    // padding-left: 80px;
    float: left;
    color: #666;
  }

  .btn {
    float: right;
    margin-top: 5px;
    // margin-right: 100px;
  }
}

.shaixuan {
  // margin-right: 100px;
  // margin-left: 80px;
  margin-top: 20px;
  height: 60px;
  line-height: 60px;
  background-color: rgba(243, 243, 243);
  border: 1px solid #999;

  span {
    display: inline-block;
  }

  .chaxun {
    margin-left: 20px;
  }

  .btn-one {
    float: right;
    height: 40px;
    margin-top: 10px;
    margin-right: 20px;
  }

  .btn-two {
    float: right;
    height: 40px;
    margin-top: 10px;
  }
}

.shaixuan1 {
  // margin-right: 100px;
  // margin-left: 80px;
  height: 60px;
  background-color: white;
  border: 1px solid #999;

  .demo-form-inline {
    padding-top: 10px;
    margin-left: 20px;
  }
}

.table-1 {
  // margin-left:80px;
  // margin-right:100px;
  margin-top: 20px;
  border: 1px solid #999;
}

.block {
  margin-left: 630px;
}

.shuaixuan-bt {
  // height: 60px;
  // margin-left: 80px;
  //  margin-right: 100px;
  // line-height: 60px;
  margin-top: 40px;
  background-color: #fff;
  border: 1px solid #999;

  .shai {
    margin-left: 20px;
    padding: 10px;
  }
}
</style>
